<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import store from "@/store";
// 导入消息工具
import message from "@/utils/message.js";
// 导入图标工具
import { User, Document, Star, Setting, Edit } from "@/utils/icons.js";

const router = useRouter();

// 用户信息
const userInfo = computed(() => store.state.gdepUserInfo);
const avatar = computed(
    () => userInfo.value.avatar || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const username = computed(() => userInfo.value.user_name || userInfo.value.account || "用户");

// 简历统计信息
const resumeStats = ref({
    total: 0,
    submitted: 0,
    viewed: 0,
    invited: 0,
    loading: false,
});

// 获取用户信息
const getUserInfo = async () => {
    try {
        // 已经通过直接导入store获取了用户信息，这里不需要再dispatch
        // 如果有需要重新获取的逻辑，可以在这里添加
        console.log("当前用户信息:", userInfo.value);
    } catch (error) {
        console.error("获取用户信息失败", error);
        message.error("获取用户信息失败");
    }
};

// 获取简历统计
const getResumeStats = async () => {
    resumeStats.value.loading = true;
    try {
        // 模拟获取简历数据，实际项目中应该从API获取
        setTimeout(() => {
            resumeStats.value = {
                ...resumeStats.value,
                total: Math.floor(Math.random() * 5) + 1,
                submitted: Math.floor(Math.random() * 10),
                viewed: Math.floor(Math.random() * 8),
                invited: Math.floor(Math.random() * 3),
                loading: false,
            };
        }, 500);
    } catch (error) {
        console.error("获取简历统计失败", error);
        resumeStats.value.loading = false;
    }
};

// 页面跳转
const navigate = (path: string) => {
    router.push({
        path,
    });
};

// 修改个人信息
const editUserInfo = () => {
    router.push({
        path: "/user/info",
    });
};

// 登出
const handleLogout = () => {
    message
        .confirm("确定要退出登录吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            store.commit("setLogout");
            router.push({
                path: "/login",
            });
            message.success("退出登录成功");
        })
        .catch(() => {});
};

onMounted(() => {
    getUserInfo();
    getResumeStats();
});
</script>

<template>
    <div class="user-home-container">
        <!-- 顶部头像信息区域 -->
        <el-card class="user-info-card">
            <div class="user-profile">
                <el-avatar :size="100" :src="avatar" class="user-avatar">
                    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                </el-avatar>
                <div class="user-info">
                    <h2>{{ username }}</h2>
                    <p>{{ userInfo.email || "未设置邮箱" }}</p>
                    <p>{{ userInfo.phone || "未设置手机号" }}</p>
                    <div class="edit-button">
                        <el-button type="primary" plain size="small" @click="editUserInfo" :icon="Edit">
                            修改个人信息
                        </el-button>
                        <el-button type="danger" plain size="small" @click="handleLogout"> 退出登录 </el-button>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 简历统计信息 -->
        <el-card class="resume-stats-card" v-loading="resumeStats.loading">
            <template #header>
                <div class="card-header">
                    <span>简历统计</span>
                    <el-button text @click="navigate('/user/resume')">查看全部简历</el-button>
                </div>
            </template>
            <div class="stats-container">
                <div class="stat-item" @click="navigate('/user/resume')">
                    <div class="stat-icon blue">
                        <el-icon :size="28"><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ resumeStats.total }}</div>
                        <div class="stat-label">我的简历</div>
                    </div>
                </div>
                <div class="stat-item" @click="navigate('/user/submitResume')">
                    <div class="stat-icon green">
                        <el-icon :size="28"><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ resumeStats.submitted }}</div>
                        <div class="stat-label">已投递</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon orange">
                        <el-icon :size="28"><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ resumeStats.viewed }}</div>
                        <div class="stat-label">已查看</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon purple">
                        <el-icon :size="28"><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-value">{{ resumeStats.invited }}</div>
                        <div class="stat-label">面试邀请</div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 快捷功能入口 -->
        <el-card class="quick-access-card">
            <template #header>
                <div class="card-header">
                    <span>快捷功能</span>
                </div>
            </template>
            <div class="quick-access-container">
                <div class="access-item" @click="navigate('/user/resume')">
                    <el-icon :size="32"><Document /></el-icon>
                    <div>简历管理</div>
                </div>
                <div class="access-item" @click="navigate('/user/collect')">
                    <el-icon :size="32"><Document /></el-icon>
                    <div>我的收藏</div>
                </div>
                <div class="access-item" @click="navigate('/user/info')">
                    <el-icon :size="32"><Setting /></el-icon>
                    <div>个人设置</div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.user-home-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.user-info-card {
    margin-bottom: 20px;
}

.user-profile {
    display: flex;
    align-items: center;
}

.user-avatar {
    margin-right: 30px;
    border: 2px solid #eee;
}

.user-info {
    flex: 1;
}

.user-info h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.user-info p {
    margin: 5px 0;
    color: #666;
}

.edit-button {
    margin-top: 15px;
}

.resume-stats-card,
.quick-access-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    width: 23%;
    min-width: 200px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: white;
}

.blue {
    background-color: #409eff;
}
.green {
    background-color: #67c23a;
}
.orange {
    background-color: #e6a23c;
}
.purple {
    background-color: #8e44ad;
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.quick-access-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.access-item {
    width: 120px;
    height: 100px;
    background-color: #f9f9f9;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.access-item:hover {
    background-color: #ecf5ff;
    color: #409eff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.access-item .el-icon {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .user-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .user-avatar {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .stat-item {
        width: 45%;
        min-width: auto;
    }
}
</style>
